<!--日历组件-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <PnCalendar ref="calendar"
                :multi="component.compConfigData.multi"
                :range="component.compConfigData.range"
                :lunar="component.compConfigData.lunar"
                :zero="component.compConfigData.zero"
                :value="value"
                :current-style="{
                  defaultColor: component.compConfigData.styleObj.defaultColor,
                  disabledColor: component.compConfigData.styleObj.disabledColor,
                  selectedColor: component.compConfigData.styleObj.selectedColor,
                  selectedBackgroundColor: component.compConfigData.styleObj.selectedBackgroundColor,
                  hoverColor: component.compConfigData.styleObj.hoverColor,
                  hoverBackgroundColor: component.compConfigData.styleObj.hoverBackgroundColor,
                  mainFontSize: component.compConfigData.styleObj.mainFontSize,
                  weekFontSize: component.compConfigData.styleObj.weekFontSize,
                }"
                @select="selectHandler"
                @selectMonth="selectMonthHandler"
                @selectYear="selectYearHandler"></PnCalendar>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import _ from 'lodash'
  import PnCalendar from "./PnCalendar.vue";

  const _this = {
    name: 'PnCalendarComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    components: {
      PnCalendar
    },
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        multi: false,
        range: false,
        lunar: false,
        zero: false,
        initCurrentDate: true, // 初始化为当前日期

        styleObj: {
          defaultColor: '#ffffff',
          disabledColor: '#616161',
          selectedColor: '#fff',
          selectedBackgroundColor: '#2196f3',
          hoverColor: '#444',
          hoverBackgroundColor: '#fff',
          mainFontSize: 18,
          weekFontSize: 16,
        },

        selectCallbackCode: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'year',
            remark: '年'
          },
          {
            field: 'month',
            remark: '月'
          },
          {
            field: 'day',
            remark: '日'
          }
        ],
        ds_resultObj: [
          {
            "year": 2022,
            "month": 2,
            "day": 22
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemSelect', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('year',''),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('month',''),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('day','')
        ])
      ]))
    },
    data() {
      return {
        value: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改

        this.calendar.setToday()

        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      selectHandler (value) {
        this.value = value
        // 如果是多选模式
        if (this.component.compConfigData.multi) {
          let years = _.uniq(value.map((o)=>{return o[0]})).toString()
          let months = _.uniq(value.map((o)=>{return o[1]})).toString()
          let days = _.uniq(value.map((o)=>{return o[2]})).toString()
          this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemSelect', {year: years, month: months, day: days})
        }else {
          this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemSelect', {year: value[0], month: value[1], day: value[2]})
        }
        if (this.component.compConfigData.selectCallbackCode) {
          eval(this.component.compConfigData.selectCallbackCode)
        }
      },
      selectMonthHandler (month, year) {

      },
      selectYearHandler (year) {

      }
    },
    computed: {
      calendar () {
        return this.$refs.calendar
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
